<template>
    <rx-dialog @ok="handleSubmit" @cancel="cancel">
        <div class="systemImg-dark-img" v-if="mode =='dark'">
            <div class="systemImg-dark-img-common" @click="pitchImg(i)"
                 :class="{'systemImg-dark-img-common-hover':i==key}" v-for="(i,index) in 15" :key="index">
                <div v-if="key ==i" class="systemImg-dark-img-common-icon">
                    <rx-icon-show icon="icon-linedui"></rx-icon-show>
                </div>
                <img :src="getImage('/image/background/dark'+i+'.png')">
            </div>
        </div>
        <div class="systemImg-dark-img" v-else-if="mode =='bright'">
            <div class="systemImg-dark-img-common" @click="pitchImg(i)"
                 :class="{'systemImg-dark-img-common-hover':i==key}" v-for="(i,index) in 10" :key="index">
                <div v-if="key ==i" class="systemImg-dark-img-common-icon">
                    <rx-icon-show icon="icon-linedui"></rx-icon-show>
                </div>
                <img :src="getImage('/image/background/light'+i+'.png')">
            </div>
        </div>
        <div class="systemImg-dark-img" v-else-if="mode =='border'">
            <div class="systemImg-dark-img-common" @click="pitchImg(i)"
                 :class="{'systemImg-dark-img-common-hover':i==key}" v-for="(i,index) in 6" :key="index">
                <div v-if="key ==i" class="systemImg-dark-img-common-icon">
                    <rx-icon-show icon="icon-linedui"></rx-icon-show>
                </div>
                <img :src="getImage('/image/background/border'+i+'.png')">
            </div>
        </div>
        <div class="systemImg-dark-img" v-else-if="mode =='title'">
            <div class="systemImg-dark-img-common" @click="pitchImg(i)"
                 :class="{'systemImg-dark-img-common-hover':i==key}" v-for="(i,index) in 20" :key="index">
                <div v-if="key ==i" class="systemImg-dark-img-common-icon">
                    <rx-icon-show icon="icon-linedui"></rx-icon-show>
                </div>
                <img style="height: 40px" :src="getImage('/image/background/title'+i+'.png')">
            </div>
        </div>
        <div class="systemImg-material-img" v-else-if="mode =='material'">
            <a-tabs :defaultActiveKey="imgNameObj">
                <a-tab-pane key="png" :tab="imageI18n('PageBackground','页面标题背景')" force-render>
                    <div class="systemImg-dark-img">
                        <div class="systemImg-dark-img-common" @click="pitchImg(i,'dynamicPng')"
                             :class="{'systemImg-dark-img-common-hover':i==key && imgNameObj=='dynamicPng'}"
                             v-for="(i,index) in 11" :key="index">
                            <div v-if="key ==i && imgNameObj=='dynamicPng'" class="systemImg-dark-img-common-icon">
                                <rx-icon-show icon="icon-linedui"></rx-icon-show>
                            </div>
                            <img style="height: 20px" :src="getImage('/image/background/dynamicPng'+i+'.png')">
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="title" :tab="imageI18n('columnHeadingBackground','栏目标题背景')" force-render>
                    <div class="systemImg-dark-img">
                        <div class="systemImg-dark-img-common" @click="pitchImg(i,'title')"
                             :class="{'systemImg-dark-img-common-hover':i==key && imgNameObj=='title'}"
                             v-for="(i,index) in 20" :key="index">
                            <div v-if="key ==i && imgNameObj=='title'" class="systemImg-dark-img-common-icon">
                                <rx-icon-show icon="icon-linedui"></rx-icon-show>
                            </div>
                            <img :src="getImage('/image/background/title'+i+'.png')">
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="border" :tab="imageI18n('columnBackground','栏目背景')" force-render>
                    <div class="systemImg-dark-img">
                        <div class="systemImg-dark-img-common" @click="pitchImg(i,'border')"
                             :class="{'systemImg-dark-img-common-hover':i==key && imgNameObj=='border'}"
                             v-for="(i,index) in 6" :key="index">
                            <div v-if="key ==i && imgNameObj=='border'" class="systemImg-dark-img-common-icon">
                                <rx-icon-show icon="icon-linedui"></rx-icon-show>
                            </div>
                            <img style="height: 160px" :src="getImage('/image/background/border'+i+'.png')">
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="gif" :tab="imageI18n('dynamicBackground','动态背景')">
                    <div class="systemImg-dark-img">
                        <div class="systemImg-dark-img-common" @click="pitchImg(i,'gif')"
                             :class="{'systemImg-dark-img-common-hover':i==key && imgNameObj=='gif'}"
                             v-for="(i,index) in 5" :key="index">
                            <div v-if="key ==i && imgNameObj=='gif'" class="systemImg-dark-img-common-icon">
                                <rx-icon-show icon="icon-linedui"></rx-icon-show>
                            </div>
                            <img style="height: 160px" :src="getImage('/image/background/dynamic'+i+'.gif')">
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="other" :tab="imageI18n('other','其它')">
                    <div class="systemImg-dark-img">
                        <div class="systemImg-dark-img-common" @click="pitchImg(i,'other')"
                             :class="{'systemImg-dark-img-common-hover':i==key && imgNameObj=='other'}"
                             v-for="(i,index) in 16" :key="index">
                            <div v-if="key ==i && imgNameObj=='other'" class="systemImg-dark-img-common-icon">
                                <rx-icon-show icon="icon-linedui"></rx-icon-show>
                            </div>
                            <img style="height: 100px;" :src="getImage('/image/background/other'+i+'.png')">
                        </div>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>
    </rx-dialog>
</template>

<script>
import {Util,RxDialog} from "@lowcode/jpaas-base-lib";

export default {
    name: "SystemImg",
    props: ['destroy', 'bgImage', 'mode', 'imgName'],
    components:{RxDialog},
    data() {
        return {
            key: 1,
            imgNameObj:''
        }
    },
    mounted() {
        this.imgNameObj = JSON.parse(JSON.stringify(this.imgName))
        this.init()
    },
    methods: {
        imageI18n(name, text, key) {
            return this.$ti18(name, text, "imageLang", key);
        },
        init() {
            this.key = this.bgImage
        },
        pitchImg(i, name) {
            this.key = i;
           this.imgNameObj = name
        },
        handleSubmit() {
            let img = {
                key: this.key,
                imgName: this.imgNameObj
            }
            Util.closeWindow(this, "ok", img);
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
        getImage(url) {
            return import.meta.env.JPAAS_BASE_URL + url;
        },
    }
}
</script>

<style scoped lang="less">
.systemImg-material-img {
    width: 100%;

}

.systemImg-dark-img {
    display: flex;
    flex-wrap: wrap;
}

.systemImg-dark-img-common:hover {
    border: solid 2px #4285f4;
}

.systemImg-dark-img-common-hover {
    border: solid 2px #4285f4 !important;
}

.systemImg-dark-img-common {
    width: calc(20% - 20px);
    margin: 10px;
    height: 200px;
    background-color: #f4f4f4;
    position: relative;
    border-radius: 4px;
    display: flex;
    align-items: center;
    border: solid 2px white;
    overflow: hidden;
    cursor: pointer;

    .systemImg-dark-img-common-icon {
        position: absolute;
        top: 0px;
        right: 0px;
        height: 0px;
        width: 0px;
        border: 14px solid;
        border-color: #4285f4 #4285f4 transparent transparent;
        color: white;
        span {
            margin-top: -13px;
            display: block;
        }
    }

    img {
        max-width: calc(100% - 50px);
        background-size: 100% 100%;
        object-fit: cover;
        margin: auto;
    }
}
</style>
